<template>
	<view class="container">
		<view class="action-section" @tap="bottomUp">
			<view class="total-box">
				<text class="price">¥{{totalPrice}}</text>
				<!-- <text class="coupon">
					已优惠
					<text>74.35</text>
					元
				</text> -->
			</view>
			<button type="primary" class="no-border confirm-btn" @click.stop="createOrder">去结算</button>
		</view>     
	</view>
</template>

<script>
	import {mapState,mapGetters} from 'vuex'
	export default{
		data(){
			return{
				clearCart(){
					
				}
			}
		},
		computed: {
		  ...mapState(['userInformation','goodsInfor','goodsArray','num_flag','cart']),
		  ...mapGetters(['count','show_num','totalPrice','show_menu'])
		},
		methods:{
			createOrder(){
				uni.navigateTo({
					url:'/pages/payment/payment'
				})
			},
			bottomUp(){
				this.$emit('bottomUp')
			}
		}
	}
</script>

<style lang="scss">
	.container{
		display: flex;
		justify-content: center;
	}
	.action-section{
		/* #ifdef H5 */
		margin-bottom:100upx;
		/* #endif */
		position:fixed;
		// left: 30upx;
		// bottom:30upx;
		// bottom:100rpx;
		bottom:0rpx;
		z-index: 99999;
		display: flex;
		align-items: center;
		width: 690upx;
		height: 100upx;
		padding: 0 30upx;
		background: rgba(255,255,255,.9);
		box-shadow: 0 0 20upx 0 rgba(0,0,0,.5);
		border-radius: 16upx;
		
		.total-box{
			flex: 1;
			display:flex;
			flex-direction: column;
			// text-align:right;
			padding-right: 40upx;
			.price{
				font-size: $font-lg;
				color: $font-color-dark;
			}
			.coupon{
				font-size: $font-sm;
				color: $font-color-light;
				text{
					color: $font-color-dark;
				}
			}
		}
		.confirm-btn{
			padding: 0 38upx;
			margin: 0;
			border-radius: 100px;
			height: 76upx;
			line-height: 76upx;
			font-size: $font-base + 2upx;
			background: $uni-color-primary;
			box-shadow: 1px 2px 5px rgba(00,122 , 255, 0.72)
		}
	}
	
</style>
